<!DOCTYPE html>
<!--
  #%L
  This file is part of "Apromore Community".
  %%
  Copyright (C) 2018 - 2020 The University of Melbourne.
  %%
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Lesser General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.
  
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Lesser Public License for more details.
  
  You should have received a copy of the GNU General Lesser Public
  License along with this program.  If not, see
  <http://www.gnu.org/licenses/lgpl-3.0.html>.
  #L%
  -->

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" href="../css/style.css" type="text/css" />
  
  <style>
    html, body, #canvas, #bpmnViewer {
      height: 100%;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    } 
  </style>
  <title>BPMN 2.0 Model/Results Viewer</title> 
</head>
<body>

<base href="http://bimp.cs.ut.ee/components/com_qbp/bpmnviewer/index.html" />
<script src="../bower_components/dist/bpmn-navigated-viewer.min.js"></script>
<script src="../heatmap/build/heatmap.min.js"></script>
<script src="../js/bimp.bpmnviewer.js"></script>

<p id="heatmap-type-paragraph" style="display: none;">
Select heat map based on element:
    <select name="heatmap-type" id="heatmap-type">
        <option value="waiting">Waiting times</option>
        <option value="count">Counts</option>
        <option value="cost">Costs</option>
        <option value="duration">Durations</option>
        <option value="">None</option>
    </select>
</p>

<div id="bpmnViewer"/>

<script>
    var xml = new XMLSerializer().serializeToString(window.opener.bimp.parser.xmlFile);
    
    var containerId = "bpmnViewer";
    bimpbpmnviewer.initViewer(containerId, xml, 
        function() {
            if (window.opener.bimp.results.results.elements) {
                var heatmapTypeSelectionParagraph = document.getElementById("heatmap-type-paragraph");
                heatmapTypeSelectionParagraph.style.display = 'block';
                
                var heatmapTypeSelect = document.getElementById("heatmap-type");
                bimpbpmnviewer.initHeatmap(containerId, window.opener.bimp.results, heatmapTypeSelect.value);
                heatmapTypeSelect.addEventListener("change", function() {
                    bimp.bpmnviewer.initHeatmap(containerId, window.opener.bimp.results, heatmapTypeSelect.value);                 
                });
            }
        });
    </script> 
</body>
</html>
